<template>
  <div>
    <van-search
      v-model="searchvalue"
      shape="round"
      placeholder="请输入搜索关键词"
      @imput="inputFn"
    />
    <div class="search_wrap" v-if="resultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotList"
          :key="index"
          @click="fn(obj.first)"
        >
          {{ obj.first }}
        </span>
      </div>
    </div>
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <songItem
          v-for="obj in resultList"
          :key="obj.id"
          :name="obj.name"
          :author="obj.ar[0].name"
          :id="obj.id"
        ></songItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotsearchAPI, searchresultAPI } from "@/api";
import songItem from "./songItem.vue";
export default {
  components: {
    songItem
  },
  data() {
    return {
      searchvalue: "",
      hotList: [],
      resultList: [],
      timer: null,
      loading:false,
      finished:false,
      page:1
    };
  },
  async created() {
    const res = await hotsearchAPI();
    this.hotList = res.data.result.hots;
  },
  methods: {
    async fn(str) {
      this.searchvalue = str;
      const res = await searchresultAPI({
        type: 1,
        keywords: this.searchvalue,
      });
      this.resultList = res.data.result.songs;
      setTimeout(() => {
        clearTimeout(this.timer);
      });
    },
    async getListFn() {
      return await searchresultAPI({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20, // 固定公式
      }); // 把搜索结果return出去
      // (难点):
      // async修饰的函数 -> 默认返回一个全新Promise对象
      // 这个Promise对象的结果就是async函数内return的值
      // 拿到getListFn的返回值用await提取结果
    },
    async inputFn() {
      // 目标: 输入框改变-逻辑代码-慢点执行
      // 解决: 防抖
      // 概念: 计时n秒, 最后执行一次, 如果再次触发, 重新计时
      // 效果: 用户在n秒内不触发这个事件了, 才会开始执行逻辑代码
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        this.page = 1; // 点击重新获取第一页数据
        this.finished = false // 输入框关键字改变-可能有新数据(不一定加载完成了)
        // 输入框值改变
        if (this.value.length === 0) {
          // 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
          this.resultList = [];
          return;
        }
        const res = await this.getListFn();
        console.log(res);
        // 如果搜索结果响应数据没有songs字段-无数据
        if (res.data.result.songs === undefined) {
          this.resultList = [];
	  return
        }
        this.resultList = res.data.result.songs;
        this.loading = false;
      }, 900)
    },
    async onLoad() {
      // 触底事件(要加载下一页的数据咯), 内部会自动把loading改为true
      this.page++;
      const res = await this.getListFn();
      //console.log(res);
      if (
        res.data.result.songs === undefined
      ) { // 没有更多数据了
        this.finished = true; // 全部加载完成(list不会在触发onload方法)
        this.loading = false; // 本次加载完成
        return;
      }
      this.resultList = [...this.resultList, ...res.data.result.songs];
      this.loading = false; // 数据加载完毕-保证下一次还能触发onload
    },

  },
  watch: {
    async searchvalue(val) {
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const res = await searchresultAPI({
          type: 1,
          keywords: this.searchvalue,
        });
        this.resultList = res.data.result.songs;
      }, 500);
      //监听搜索框的值改变
      if (val.length === 0) return (this.resultList = []); //判断输入框无值
    },
  },
  //防抖：n秒内最后执行一次
};
</script>

<style scoped>
/* /deep/ .van-field__control{
    font-size: small !important;
} */
.search_wrap {
  padding: 0.266667rem;
}

.hot_title {
  font-size: 0.9rem;
  color: #666;
}
.search_wrap {
  padding: 0.266667rem;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>